<template>
  <div class="game-process">
    <Card :style="{ height: '100%' }">
      <div class="progress-grp my-progress">
        <h3>Your Progress</h3>
        <Progress
          :percent="myProgress.progress | floor"
          :stroke-width="20"
          text-inside
        />
      </div>
      <Divider />
      <List :split="false">
        <TransitionListFade>
          <ListItem
            v-for="other in otherProgresses"
            :key="other.name"
            class="transition-list-fade-item"
          >
            <div class="progress-grp other-progress">
              <h3 slot="title">{{ other.name }} Progress</h3>
              <Progress
                :percent="other.progress | floor"
                :stroke-width="20"
                stroke-color="red"
                text-inside
              />
            </div>
          </ListItem>
        </TransitionListFade>
      </List>
    </Card>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from '@/plugins/class-component-hooks'

export interface UserProgressInfo {
  name: string
  progress: number
}

@Component({
  filters: {
    floor(num: number) {
      return Math.floor(num)
    }
  }
})
export default class GameProcess extends Vue {
  @Prop({ default: () => ({ name: 'brody', progress: 20 }) })
  private readonly myProgress!: UserProgressInfo
  @Prop({
    default: () => [
      { name: 'Tim', progress: 50 },
      { name: 'Alice', progress: 40 }
    ]
  })
  private readonly otherProgresses!: UserProgressInfo[]
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import '@/styles/general.scss';
.game-process {
  height: 100%;

  @media screen and (max-width: $size-xsm) {
    max-height: 14rem;
    overflow: scroll;
  }
}

.progress-grp {
  width: 100%;
  h3 {
    width: 100%;
    margin-bottom: 0.5rem;
    text-align: center;
  }
}
</style>
